How to Easily Start a React-based Project

Hello, friend! If you’re looking for a way to start your first React project fast you’ve found the right place. In this article, you can find a ready-to-use template which can help you to start learning ReactJS and to get know some basic points of work with it.

Introduction

React is a library for building composable user interfaces by breaking them into components. React uses a real full-featured programming language to render views. Learn more about React here.

Оne of the easiest way to start an acquaintance with React is to take apart a completed project. There are many developers who often buy templates to accelerate a project development. I would like to offer you this mini-version of react-based admin template to understand what bases you need to know to create your React project. The source code is on GitHub.

In the archive you can find a ready-to-use project with examples of a structure, components and routes usage. You can use it as you want for free and we will explain how to install and launch it in the video below.

How to install and to start?

The short how-to video about React app installation.

To learn more about Node.js check here.

What is ReactJS?

As I’ve noticed earlier, React is based on using components. Components allow you to split the UI into independent reusable pieces and think about each piece in isolation. You can find many sources about components creating including official React docs. If you take a look at the examples you will see the funny mix of JS and HTML. It’s called JSX (Javascript XML). So if you want to learn React you should know about both of them.

Popular React libraries

The template from this article is built with Create-React-App tool and libraries React-router and Redux.

Create-React-App

Create-React-App is a boilerplate provided by Facebook for almost any React project. It has a ready project structure, base setup and dependencies for a quick start. It’s created by developers of React and constantly updated.

React Router

React-router is a library that allows you to build SPA routing within your web app in the easiest way. What it means — you can swap pages (components) in real time without page reloading by using simple components. Each route renders its respective component when its path matches the URL. Also, you can find a router which allows you to change a page’s content without refreshing. Thanks to it you get a Single Page Application (SPA).

React Router allows you to add new pages to your app easily. In the template you can just add new Route in '~/easydevseed/src/containers/App/Router.jsx':

import LogIn from '../LogIn/index';
...
<Route path="/login" component={LogIn}/>

Now you can add '/login' to URL and see your page. That’s easy, isn’t it?

Then you can go to Redux.

Redux

Redux is a tool for managing both data-state and UI-state in React applications. It’s perfect for SPAs where state growing with new features, becoming more and more complicated. It is more complex than the libraries before, but it’s very useful for data managing.

Redux works this way:

The only way to trigger a state change is to calldispatch(action). It dispatches an action. For example, we can change sidebar state:

changeSidebarVisibility = () => {
  this.props.dispatch(changeSidebarVisibility());
};

Action makes a request and gets a current data. Its return value will be considered as the next state. Actions must have a “type” property that indicates the type of action being performed. Types should typically be defined as string constants. There is the action that is triggered in dispatch above:

export const CANGE_SIDEBAR_VISIBILITY='CANGE_SIDEBAR_VISIBILITY';
 export function changeSidebasVisibility() {
  return {
   type: CANGE_SIDEBAR_VISIBILITY,
  };
}

Action returns an object that contains required data and “type” field which represents part of reducer to be used (matched by name). Dispatch sends returned object to the reducer. The reducer decides how to change redux state according to data in the action object. In the example, you can see that our action returns type, but no value. Reducer accepts our action, finds a case in switch and updates state. It takes the old state as it and reverses collapse value.

const initialState = {
  show: false,
  collapse: false,
};
export default function (state = initialState, action) {
  switch (action.type) {
    case CHANGE_SIDEBAR_VISIBILITY:
      return { ...state, collapse: !state.collapse };
    case CHANGE_MOBILE_SIDEBAR_VISIBILITY:
      return { ...state, show: !state.show };
    default:
      return state;
  }
}

New data is caught by connecting function in the component which extracts required data and returns it to props. React handles data change and re-renders an app with new data.

export default connect(state=> ({
  sidebar: state.sidebar,
}))(Layout);

The code above allows changing the sidebar state from any part of the app. Depending on the value in the state, the sidebar class will change:

const Sidebar = ({
 changeToDark, changeToLight, changeMobileSidebarVisibility, sidebar,
}) => {
 const sidebarClass = classNames({
 sidebar: true,
 ‘sidebar — show’: sidebar.show,
 ‘sidebar — collapse’: sidebar.collapse,
 });
return (
 <div className={sidebarClass}>
 <button className=”sidebar__back” onClick={changeMobileSidebarVisibility} />
 <Scrollbar />
 </div>
 );
};

And this will change component styles:

Here you can see the new style of the sidebar.

Code linting

A code quality is one of the important things of any project. ESLint is good for improving a project code style. It’s the pluggable linting utility for JavaScript and JSX.

It allows you to write a code in the same style thanks to highlighting formatting errors. This is especially helpful when you work with a team. You can write some rules in .eslintrc and your code gets more attractive and readable.

Project build

When you finished your project you need to deploy it. Just run the command “npm run build” or “yarn build” to build project to the ‘build’ folder. It correctly bundles React in production mode and optimizes the build for the best performance. Your app is ready to be deployed!

Conclusion

The template from this article helps you to start your way in ReactJS. It is not perfect but it helps you to avoid popular mistakes in the react app installation and accelerate the first steps.

Also if you want to learn more and get a full version of the template with a bunch of components you can find it here.

Author: DragonCharlie
Editor: Ekaterina Zhuvarova
Awesome video: Oleg Anuchin

We are glad to hear your comments 💬 and get an applause 👏.

1. ThemeForest profile.
2. Website with themes and templates.
3. Facebook.