Getting started with React JS

According to the official documentation, React is a free and open-source front-end JavaScript library for building user interfaces based on components.

This article will get you up and running using React by creating a simple Hello World project

Prerequisites

One mistake many beginners do is diving into a framework without first understanding the basics of the programming language behind the framework. I have been here before and trust me, this will do more harm than good to you.

So, what do you need to know before getting started with React?

1. HTML

2. CSS

3. JavaScript

The first two in this list are pretty basic. As for JavaScript, you need to be comfortable working with variable declaration, data types, functions, conditional statements, loops and the latest ES6 features including arrow functions, template literals and object destructuring.

Feel free to check out Scrimba's Front End Developer Career Path here.

Creating your first React application using Create-React-App

Head over to Node JS to download and install Node on your computer, this should take you roughly 2 minutes.

You can now create a react application using create-react-app by running the command below:

npx create-react-app my-first-react-app

The above command sets up everything you will need to run a React application. For our case, our application will be called my-first-react-app.

To run the React application, run the command below to move into the my-first-react-app directory we just created:

cd my-first-react-app

To get the application running, run the command below:

npm start

Just like that, a new browser window will pop up (in your default brower) with our React application on port 3000

That wasn't hard, was it?

Next up, let us explore the structure of our React application.

1. node_modules- This directoy contains all the React dependencies to build and run a React project. These modules include packages like react, react-dom among others.

2. public - This directory contains static files like index.html, javascript library files, images and other assets.

3. src - This is where all the source code for the React application goes

4. .gitignore - This is a file which specifies the intentionally untracked files that Git should ignore

5. package.json - This is a JSON file that holds various metadata related to the project. It provides this information to the Node Package Manager which allows identifying the project and its dependencies.

6. README.md - This is a markdown file you will use to document your project.

Modify your first React Application

Let's spice things up a little bit. Remember: the application's code is contained inside thesrc folder. Open up the App.js file inside the src directory. This is what we have currently:

 import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Clear everything inside this file and replace it with the following snippet:

function App() {
  return (
    <div>
      <h1>Hello, World</h1>
      <p>This is my first React Application</p>
    </div>
  )
}

export default App

What is happening?

We just cleared the boilerplate code that comes with create-react-app and replaced it with our own code. In the snippet above, we are rendering JSX code inside our return statement. JSX simply stands for JavaScript XML. It allows us to write HTML in React. Check out JSX here.

Our app now has a heading with content Hello World and a paragraph with content This is my first React Application.

Feel free to modify the code and have a different heading or paragraph.

Conclusions and Next Steps

Congratulations on creating your first React application. If you'd like to explore more about React, always refer to the official documentation and feel free to reach out to the vibrant React communities on social media, where fellow developers are always willing to help