A Beginner friendly guide to setting up ReactJs
This is a basic introductory guide to React Js library. If you are somebody who has been thinking of diving into ReactJs, this article can be a basic guide to React. This is in no way exhaustive however, it does contain introduction to the most important concepts required for a beginner and installation details using various methods.
So let’s jump right in!
What is React?
React is an open source library created by Facebook. It is not a framework.
React is used to build interactive UI.
In React, we create components which are custom, reusable HTML elements that can be used to efficiently and quickly build UI.
React also provides a way to manage how data is stored and handled using state and props.
Setup and Installation
Method 1 — Using CDN
Steps -
- Create an html file.
2. Load three CDNs in the head — React, ReactDOM, Babel.
(i) React — React’s top level api.
(ii) ReactDOM — provides DOM specific methods.
(iii) Babel — javascript compiler that convert ES6+ code into plain old ES5 javascript code that can run in any browser.
3. Create a div tag with an id = “root” where our component shall be displayed on the UI.
4. Create a script tag after body and define type=“text/babel” (mandatory for using Babel.
5. Create a component by the name App which extends from React.Component class. A component can be understood as a loosely coupled unit which contains both — logic and markup.
6. Define the render() method which is going to render DOM nodes. render() is a method that takes input data and returns what needs to be displayed.
7. return statement inside render() function returns the data to be displayed in the JSX format.
What is JSX?
JSX is a syntax extension to Javascript. It is tag syntax which is neither a string nor is html. It produces React “elements”.
React elements are plain javascript objects. React elements are immutable. The only way to update the UI when using React is to create a new element and pass it on to ReactDOM.render() method to display changed state. In jsx, any valid javascript expression is kept inside curly braces. React DOM makes sure to update DOM.
8. Next we pass the newly created element <App/> to ReactDOM.render() method alongside the document.getElementById(“root”) so as to define the entry point.
Open index.html file in the browser to see “Hello World!” getting rendered through our newly created React element.
Check out the code that went into index.html, below:
Method 2 — Create React App
Using the Method 1 is not a very efficient way because in the first method the code we write is not executed right-away by the browser. Instead, JSX is first converted to Javascript code so that browsers can support it. Next, the browsers execute the code. Instead, if we use a compiled version, browsers would be able to execute the code instantly.
So, JSX is first compiled to Javascript which is then converted to minified Javascript by performing code optimisations which is then passed to the client’s browser for execution, saving on a lot of resources and execution time.
A solution to this is using Create-React-App. There is no need to install tools like Webpack or Babel in this case and one can directly focus on the application instead of the configuration. Everything is preconfigured to build a react app.
Create React App creates a live development server, compiles JSX, provides support for CSS and SASS modules, provides support for testing using Jest.
Lets get started with the steps-
- Create a Project: mkdir reactBasics.
- Run this command from the parent’s folder: npx create-react-app reactBasics
- Once the installation is done, move to the directory, reactBasics : cd reactBasics.
- To run the app in development mode, use the command : npm start.
- Open http://localhost:3000 to view the React app in action. This page will automatically reload if any changes are made. Build errors and lint warnings can be seen in the console.
Inside the project structure we have two important folders — public and src. public folder consists of index.html which is the one serving the content. We are going to use a div with id = “root” in this index.html which is going to be our entry point for React.
src folder is the one which contains the React code. Let’s start by deleting all the files from the src folder. I am going to keep index.js and create three new files App.js, Fun.js and Welcome.js.
- index.js — This shall be used for rendering our newly created <App /> tag. We shall export the App component and load it in index.js
- App.js — This is our component which will also be used an an aggregator for multiple React components.
- Welcome.js — Second react component.
- Fun.js — Third react component.
Let’s start by removing all the code from index.js. Import React, {Component}, ReactDOM, index.css and App from components folder. We will use ReactDOM.render() method with the newly created <App /> tag to be rendered on the div element, id = “root”.
Welcome.js component will be a class based component. Import React and create a class Fun that extends from Component class. Inside the class, we will be using render() method of the Component class to return the JSX to be displayed on the browser. In the end, we will simply export the component.
In the Fun.js component, we will use the functional component approach. Import React and create a function Fun() which returns the JSX. In the end, export Fun.
In App.js component, we will import React and both the components — Welcome and Fun. Create a class App() and return jsx which has an h1 tag, Welcome tag and a Fun tag. In the end, export it.
When you refresh the page on localhost:3000, you should see something like this — Our very own first React app.
You can install React dev tools for Chrome and head over to the Components tab once you Inspect the page. You will be able to see our App component consisting of two components — Welcome and Fun, as shown below. This is a very handy tool when working with React so don’t forget to give it a try.
Method 3 — Using Webpack and Babel
Let’s first understand what Webpack and Babel is.
Webpack
Webpack is an open-source javascript module bundler where modules are independent reusable files or chunks of code. It takes up an application, maps the modules with its dependencies and generates one or more bundles. It treats all files and assets(fonts, images, etc.) as modules. Under the hood, it creates a dependency graph that describes how modules relate to each other using require and import statements in the correct order. It just combines everything in the correct order to create a javascript file which can then be included in an html file for execution.
Babel
Babel is a javascript compiler. Babel is a tool that is used to transform ECMA script 2015+ code into backward compatible code for execution in current and older versions of browsers or environments.
Let’s now look at implementation using Webpack and Babel.
Step 1- Create a new directory “webpack-react-app” and cd in it.
Step 2- Initialise a new project using: npm init -y to create a package.json file.
Step 3- Install react and react-dom using: npm i react react-dom
Step 4- Install webpack, webpack-cli, webpack-dev-server and html-webpack-plugin using npm i — save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
webpack-dev-server- used for live reloading. Only used in development environment.
webpack-cli- provides a set of commands to set up a custom webpack project.
html-webpack-plugin- used to implifies creation of HTML files to serve your webpack bundles.
Step 5- Install babel with its presets and plugins using npm i — save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
babel/core- core functionality of babel,
babel/preset-env- is a preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms are needed by your target environment(s).
babel/preset-react- a preset for react,
babel-loader- is used by webpack to transpile Modern JS into the JS code that browsers can understand.
Step 6- Install style-loader, css-loader and file-loader for styles and images.Use npm i — save-dev style-loader css-loader file-loader
As webpack understands javascript, we are required to convert the styles and images in javascript using these loaders.
Step 7- Create a babel config file .babelrc by using nano .babelrc
This opens up an editor where you need to copy the below code thereby enabling webpack to use the below two presets.
{ “presets”: [“@babel/preset-env”, “@babel/preset-react”] }
Step 8- Setting up directories and files for the project. Create two directories public and src. Create an index.html file inside public folder and our entry file index.js inside of src folder. Also create App.js file inside src folder.
Step 9- Setting up webpack configuration file webpack.config.js
Create a file webpack.config.js inside the project folder and coopy the below code.
entry: entry defines the entry point for the application to start execution from and webpack to start bundling from.
output: output describes the target directory for output files. Must be an absolute path.
devServer: an object that has a set of options which are picked up by webpack-dev-server and can be used to change its behaviour in various ways. We have used a simple example that gzips and serves everything from our dist/ directory in the project root.
modules: this object defines how different types of modules within our project will be treated. It consists of an array of objects rules that uses regex to match filenames with .js and .css extension and uses the recommended loader for such files.
mode: to define the development mode.
plugins: plugins are used to customize the webpack build process. html-webpack-plugin will use your custom index.html file that will be rendered by webpack-dev-server.
Step 10- Create a react component App.js and render a simple h1 and h2 elements.
Step 11- Import App.js to index.js and render it on the element with id= root in public/index.html file.
Step 12- Create a div element with id=”root” in public/index.html file.
Step 13- Add the following to the scripts under package.json -
“start”: “webpack-dev-server”, “production”: “webpack”
Now you can run the app by running the command- npm run start and voila your app is running!!!
Hope you learnt something from the article. There’s tons more to say about this so I may add extra info when I have some free time. Feel free to ask questions if you’re struggling with anything, I love to help! 💕
