React Environment Setup

Previous Page
Next Page

Installing React/Setting Up a React Environment

React can be written in many Text-editors such as Notepad++, Sublime Text, Visual Code, etc. To install react in your local computer you will need to install NodeJs and npm. Don’t worry, by installing Node, we automatically get the node package manager (npm). In this tutorial, we will be showing you how to set-up a React development environment in three ways.

Installation using Webpack and babel

Webpack is a module bundler. It takes module dependencies and bundles(compiles) them into one file bundle. You can use this bundle when developing Apps or configure it with webpack.config file.

Babel is a JavaScript Transpiler and compiler, it converts source codes like JSX from one code to pure Javascript.

1. Set up a folder for the React project by typing the following command to the Command-line:

PS C:\Users\HP\react> mkdir react-project
PS C:\Users\HP\react> cd react-project

2. Initialize a package.json folder with the following command,

PS C:\Users\HP\react\react-project> npm init

3. Install React DOM and react

PS C:\Users\HP\react\react-project> npm I react -save
PS C:\Users\HP\react\react-project> npm I react-dom -save

4. Install Webpack and babel:

PS C:\Users\HP\react\react-project>npm install webpack webpack-dev-server webpack-cli --save
PS C:\Users\HP\react\react-project>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

Set up with CDN

You can add React to your HTML website in as little as three lines of code. In the head tag of your HTML file add:

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Installation using create-react-app

In the command-line interface of your computer, create a new folder and change the directory to the folder, like so:  

Write the following command:

‘npx create-react-app followed by the name you want to give the app’.  

Wait for all the configuration set-up and then cd into the folder. Write the command ‘npm start’ to start up the development server where all your React code can be displayed to the browser.

You should automatically be re-directed to your browser, or follow the link displayed after installation. It will be similar to http://localhost:3000/ . You should then see a web page resembling this:   

The installation is now complete!

Tip: To follow the rest of this tutorial, in the src folder of the created app, go to the App.js file and delete all the code in the return() brackets. Also, remove all import statements except ‘import react from ‘react’’. Now that this is done, this file will be used to write our code.

React App structure

React App structure is very similar to a tree or hierarchical data structure. The topmost file is the particular one that renders or injects the HTML code to be displayed on the screen, by default on installation index.js is the topmost file containing the render method, ReactDOM.render().

Index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

From the above example, a component <App/> is imported and rendered, this file contains all other components or HTML code to be rendered. App.js will look like this:

App.js:

import React from 'react'

const App = () => {
   return (
      <div>
         <Header />
         <Body />
         <Footer />
      </div>
   )
}

export default App

App.js receives all the component in our project in one place and then transfers it to the render method in Index.js

As our project’s component become larger we might want to create separate folders for components, stylesheets, and others, to make our App structure neater and easier to navigate, for instance, the <Header/>, <Body/> and <Footer/> components should be put in a separate folder as say components. Our App.js now looks like so:

import React from 'react'
import Header from './components/Header'
import Body from './components/Body'
import Footer from './components/Footer'

const App = () => {
   return (
      <div>
         <Header />
         <Body />
         <Footer />
      </div>
   )
}

export default App

Avoid too much nesting, that can make your project more difficult to understand and navigate through, e.g.

import Header from './components/subcomponents/homepage/Header'
Previous Page
Next Page