Create a React.js, Tailwind with i18n project in a couple of minutes from Github
Gabi
Posted on February 13, 2020
Why?
I am creating a short series for Template projects to boost my productivity when starting a new project from scratch.
If you are interested in a Template project with SpringBoot, Flyway, Java 11, Maven check out this project: https://dev.to/gabriela/create-a-springboot-flyway-project-in-a-couple-of-minutes-on-github-12jj
About this project:
To build the project locally, run:
NPM:
npm install
npm start
Yarn:
yarn install
yarn start
See the results
Then open http://localhost:3000 in a browser and the application should be running.
I used the free Tailwind CSS template by https://www.tailwindtoolbox.com/templates/nordic-store
Project Structure:
components
a) common : About.js, Footer.js, Hearder.js
b) dashboard : Main.js, MainPage.jsNotFound.js: renders when the path from router doesn't match anything we expect to
Page.js: a "higher order"/parent component for all the other components except NotFound.js Here you can declare the strucutre of any page and create functions that are needed by all. Pass them down to child components using props.
Router.js: declare URL paths and associated components
img: images used in the application
config: i18n.js, options.js: configuration for internationalization. Goes hand in hand with folder /locales where all the translations are described
locales: home for all translations. Add here more languages or delete some
styles:
a) index.css: imported all tailwind dependencies
b) tailwind.css: generated taiwind cssindex.js: entry point of the application
tailwind.js: here you can keep/add/delete whatever you want to customise the entire application. Read more here: https://tailwindcss.com/docs/container
postcss.config.js: Tailwind is added to the project as a Postcss plugin. This and autoprefixer are added to this config file.
Code can be found here: https://github.com/gabrielaradu/reactjstailwindcsstemplate
You can download or fork this project in order to save time in your development. Happy Coding.
Posted on February 13, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
February 13, 2020