Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Set Up the React Project

Semantic UI has first-class bindings for React, with a predefined React components for each type of Semantic element. In this lesson, we’ll set up our example project: a clone of a GitHub repo page.

Related Links

4.1 Set Up the React Project

Hello everyone, I am Reggie Dawson. Welcome to the Semantic UI Framework in JavaScript projects course for Tuts Plus. Now, the first example of using Semantic was more proof of concept. I would never try to build a project beyond what we did with just plain JavaScript. Our project could have benefited by some sort of framework that allows us to use modules. In this way, we could've broken down each section into its own file. I am sure this would have made it easier to follow along with the project. One of the most popular frameworks today is React. Built by Facebook, developers love how easy it is to incorporate React even with existing projects. It is also easy to pick up if you have some JavaScript experience. In this video, we will build a small clone of GitHub. Now again, all we are building is a prototype that shows how we can use Semantic with React. React is one of the frameworks that has a specialized integration with Semantic UI. The majority of the Semantic components that we saw before will be available to us in React. All we have to do is configure these components using JSX. Even if you aren't familiar with React, you should be able to follow along with what we're going to do. Now In order to get started with React, we of course need to install it. There are many different options, but how you will build your app will determine the tools that you need. Since I'm going to build the project using ES6, I will need Babel to compile my project. We will also need Babel to compile our GSX. The best way I've found to get up and running with React quickly is the Create React app. This tool installs all of the tools that we need as well as giving us the ability to generate projects from the command line. Again, we will need to have Node installed because we will be installing from NPM. Npm install-g create-react-app will install this globally. Now after that, navigate to the folder where you wanna create your project in a command line. This will generate our project for us with everything configured and ready to go. After that, navigate into the project folders so we can install Semantic. Npm install semantic-ui-react -save will install semantic-ui-react into our package.json file. Now this will provide us with the libraries we need for the integration with React. We still need to install the regular Semantic UI package so we have access to the CSS styles that we need. Now we use this command to install the Semantic package into the dev dependencies. After the install runs, we of course have to configure Semantic. We will just choose automatic to accept the defaults. Now after that, let's go over to the Semantic folder in our project. Then go into the SRC folder and select the theme.config file. Now instead of making a lot of changes in the overrides, we will just use the theme.config file. We are going to change the theme settings for the site, the menu, the grid, the header, and the button to GitHub. After that, let's go into the Semantic folder in the command line and run gulp build. After the project compiles, go back to the project in your editor. First, we will go to index.js in the src folder. Now this file will serve as the root of our app and will host the other components that we create. All we will add here is an import for our Semantic CSS file. Now with the React version of Semantic, we don't need jQuery, but we will need to import anything we need from Semantic directly inside of our React components. Then after that, go to the App.js file. This is the file where we will construct our user interface. Each of the components that make up our interface will be pieced together here. This will make more sense as we build the project. Now at the top of the file, we have imports. This is how we will import the components that we create into this file. Being able to import allows us to build our app in a modular way with each part of the user interface in its own component. We could remove the import for the logo, and replace it with the import for the Semantic grid. For any of the components that we wanna use for Semantic, we first must import them or we will get an error. Once we do that, we can remove everything from inside the return statement in our class. Then, we replace it with the grid. This grid is wrapped by a container, so it is not full width. After that, the initial configuration of our project is done. In the next video, we will set up our menu component.

Back to the top