React Series - #1 [ Intro ]

I've decided to dive into React and will be making a blog-series on react as I learn it.

Note: Take a look atthis post first to get a feel of some JavaScript syntax that is used in React.

React is a popular JavaScript library used mostly in building user-interfaces.

Let's have a look at what a React application(not really an app) looks like:

First, To setup a simple react-environment, make sure node-js is installed, then open the terminal and navigate(in-terminal) to a directory where you would like the react-project to be in then write this command in the terminal

npx create-react-app name-of-project

This will use a package "create-react-app"( used for generating react projects ) to generate a react project in a folder "name-of-project". It downloads the react library along with some other dependencies and useful tools, then sets up a template for a project.

With the react environment successfully setup there should be a couple of folders like 'public, src, node_modules'.
public: holds static files like the html files
src: holds the react source code we're working on
node_modules: holds dependencies of the project

Delete the files in 'src' folder and then create a fresh js file in there called 'index.js' and we can begin to code in React.

Copy this code snippet into the js file :

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>Hello World!</div>
  )
}

ReactDOM.render(<App />,document.querySelector('#root'));

First we're importing the react and react-dom library and assigning it to a variable "React" and "ReactDOM".
react-dom library allows react to interact with the DOM.

We define a React Component using arrow function syntax which returns what looks like a HTML div tag with the string "Hello World!" but in reality is just JSX (Javascript XML) which is used with React to describe what the UI should look like.

JSX doesn't have to be used but it makes things better and more readable, the non-JSX equivalent of the code is:

React.createElement("div", null, "Hello World!");

which might not look bad when we replace the JSX code with it, but when you start writing more complex code, it can potentially mess up the beauty of your code.

Then we use the react-dom to render the react component we created inside a div with "id" of 'root'. The app component is wrapped in JSX syntax which is better than having to write something like react.default.createElement(App, null).

Note : The HTML file that contains the div is in the 'public' folder

Run npm start in the react project folder to run your project, it will open the page in your browser.

Thanks for reading this short blog, Drop a follow to be informed when I drop the continuation of this post