Hello, if you are here I can only guess that you want to create a new React application and use a bootstrap template because it’s just awesome and saves you considerate time OR that you are curious on how to integrate the template into the React project. For this article I presume you already had contact with React and know how to create a new project. If not, read this article first because it’s a good start: https://reactjs.org/docs/create-a-new-react-app.html
Bellow are the steps I took to accomplish this task.
1. Find a template you like
This is not always easy but with a bit of research you can find something appropriate. Keep in mind the scope of the application and that will narrow down the options. So far I really like the templates from Bootstrapious.com because they are clean and nicely implemented. You can use it for personal or commercial use if you keep the original credits from the template or make a donation to be able to delete that (check out their website for more info).
2. Find beautiful artistic resources
You might want to have something nice and artsy on your website. I absolutely love https://undraw.co/ and https://unsplash.com/.
3. Scaffold empty pages
For each page from the template you will need to have a corespondent React component.
4. Live check style changes
Open terminal and run > yarn start
This will open a tab in your preferred browser and here is where you always check your modifications. If you modify in styles only, you will need to refresh the page to re-render though.
5. Copy the needed resource files and folders from the template to the React app
Copy all the required Stylesheets, JavaScript files, Fonts and any other resources from the template directory into the public folder of the React app. Next we need to declare and reference them in the public/index.html file from the template index page.
6. Start using the html code in your components
Now we need to start rendering the template in our React project. To do so I separate the task into two steps:
a) I bluntly copy the
section from html template file into the render function in my component.
b) Usually the code won’t compile because some tags are not closed. Look for < img >, < hr > etc. and be sure to close them. I found this more as a trial and error stage because it depends on the template, but it definitely should work in the end if the template itself works.
That’s it.
The above steps are what I gathered from my experience so far and I hope it will help you. I would be very happy to learn of better and new ways to do this, so thank you in advance for your ideas and help.
Top comments (0)